<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <!--这一句很关键，让手机的缩放格式与电脑相同，以防出现手机显示的大小与电脑不同-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2023春晚节目单</title>

    <!--本地版-->
    <link rel="stylesheet" href="plugins/elementUI_2.15.7/index.css" />
    <script src="plugins/vue_2.6.14/vue.js"></script>
    <script src="plugins/elementUI_2.15.7/index.js"></script>
    <script src="plugins/axios/axios_0_27_2.min.js"></script>
    <script src="plugins/jquery/jquery-3.3.1.min.js"></script>
    <!-- 动画框架 -->
    <link rel="stylesheet" href="plugins/animate_4.1.1/animate.min.css">

    <!-- 公共样式 -->
    <link rel="stylesheet" href="css/common/common.css">

    <!-- 引入头部 -->
    <script src="js/common/header.js"></script>
    <link rel="stylesheet" href="css/common/header.css">

    <!-- 接口地址全局变量 -->
    <script src="/js/common/jieKouAddress.js"></script>
    <!-- 全局函数 -->
    <script src="/js/common/commonMethod.js"></script>

    <!-- 当前页主样式 -->
    <style>
        .picture {
            width: 100%;
            border-radius: 10px;
            margin: 20px 5px;
        }
    </style>
    <!-- 图像压缩 -->
    <script src="plugins/image_compressor/image-compressor.min.js"></script>
</head>

<body>

    <div id="app">
        <!-- 公共头部 -->
        <header id="headerContent"></header>
        <div class="milkbox-container-center">
            <img class="picture" src="https://f.sinaimg.cn/sinakd20230120s/578/w995h16383/20230120/08dd-f305ed965c3034bd3189c069789c316f.jpg">
        </div>
    </div>

    <!-- vue的js文件，必须放到这个地方，放到head中不生效 -->
    <script>
        "use strict";
        var vue = new Vue({
            el: '#app',
            data() {
                return {
                    vueHeader: {
                        // 必须要声明一下，否则找不到变量
                        userInfo: {}
                    },
                }
            },
            //钩子函数，VUE对象初始化完成后自动执行
            created() {
            },
            mounted() {
            },
            methods: {
                // 注意，此方法由vueHeader在创建时自动调用，参数为vueHeader自身对象
                // 可以在vueHeader对象中获取到它的所有信息
                vueHeaderCreated(vueHeader) {
                    console.log("vueHeader对象：");
                    console.log(vueHeader);
                    this.vueHeader = vueHeader;
                }
            }
        });
    </script>
    <!-- 自己对动画框架的封装 -->
    <script src="js/common/commonAnimation.js"></script>
</body>